<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="menu" :rules="rules" ref="menuFrom" label-width="150px">
      <el-form-item label="菜单名称：" prop="title">
        <el-input v-model="menu.title" placeholder="请输入菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单：">
        <el-select v-model="menu.parentId" placeholder="请选择菜单">
          <el-option v-for="item in selectMenuList" :key="item.id" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路由名称：" prop="name">
        <el-input v-model="menu.name" placeholder="请输入路由名称"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标：" prop="icon">
        <el-col :span="22">
          <el-popover ref="iconListPopover" placement="bottom-start" trigger="click"
            popper-class="mod-menu__icon-popover">
            <div class="mod-menu__icon-inner">
              <div class="mod-menu__icon-list">
                <el-button v-for="(item, index) in iconList" :key="index" @click="iconActiveHandle(item)"
                  :class="{ 'is-active': item === menu.icon }">
                  <svg-icon :icon-class="item"></svg-icon>
                </el-button>
              </div>
            </div>
          </el-popover>
          <el-input v-model="menu.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称"
            class="icon-list__input"></el-input>
        </el-col>
        <el-col :span="2">
          <svg-icon style="margin-left: 10px" :icon-class="menu.icon"></svg-icon>
        </el-col>
      </el-form-item>
      <el-form-item label="是否显示：">
        <el-radio-group v-model="menu.hidden">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="menu.sort" placeholder="请输入排序"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
        <el-button v-if="!isEdit" @click="resetForm('menuFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import {
    fetchList,
    createMenu,
    updateMenu,
    getMenu
  } from '@/api/menu';
  import Icon from '@/icons'
  const defaultMenu = {
    title: '',
    parentId: 0,
    name: '',
    icon: '',
    hidden: 0,
    sort: 0
  };
  export default {
    name: "MenuDetail",
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        menu: Object.assign({}, defaultMenu),
        selectMenuList: [],
        iconList: [],
        rules: {
          title: [{
              required: true,
              message: '请输入菜单名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 140,
              message: '长度在 2 到 140 个字符',
              trigger: 'blur'
            }
          ],
          name: [{
              required: true,
              message: '请输入前端名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 140,
              message: '长度在 2 到 140 个字符',
              trigger: 'blur'
            }
          ],
          icon: [{
              required: true,
              message: '请输入前端图标',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 140,
              message: '长度在 2 到 140 个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created() {
      if (this.isEdit) {
        getMenu(this.$route.query.id).then(response => {
          this.menu = response.data;
        });
      } else {
        this.menu = Object.assign({}, defaultMenu);
      }
      this.iconList = Icon.getNameList()
      this.getSelectMenuList();
    },
    methods: {
      // 图标选中
      iconActiveHandle(iconName) {
        this.menu.icon = iconName
      },
      getSelectMenuList() {
        fetchList(0, {
          pageSize: 100,
          pageNum: 1
        }).then(response => {
          this.selectMenuList = response.data.list;
          this.selectMenuList.unshift({
            id: 0,
            title: '无上级菜单'
          });
        });
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            if (this.isEdit) {
              updateMenu(this.$route.query.id, this.menu).then(response => {
                this.$message.success({
                  content: '修改成功',
                  type: 'success',
                  duration: 1000
                });
                this.$router.back();
              });
            } else {
              createMenu(this.menu).then(response => {
                this.$refs[formName].resetFields();
                this.resetForm(formName);
                this.$message.success({
                  content: '提交成功',
                  type: 'success',
                  duration: 1000
                });
                this.$router.back();
              });
            }


            // this.$confirm('是否提交数据', '提示', {
            //   confirmButtonText: '确定',
            //   cancelButtonText: '取消',
            //   type: 'warning'
            // }).then(() => {
            //   if (this.isEdit) {
            //     updateMenu(this.$route.query.id, this.menu).then(response => {
            //       this.$message({
            //         message: '修改成功',
            //         type: 'success',
            //         duration: 1000
            //       });
            //       this.$router.back();
            //     });
            //   } else {
            //     createMenu(this.menu).then(response => {
            //       this.$refs[formName].resetFields();
            //       this.resetForm(formName);
            //       this.$message({
            //         message: '提交成功',
            //         type: 'success',
            //         duration: 1000
            //       });
            //       this.$router.back();
            //     });
            //   }
            // });

          } else {
            this.$message.error({
              content: '验证失败',
              type: 'error',
              duration: 1000
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.menu = Object.assign({}, defaultMenu);
        this.getSelectMenuList();
      },
    }
  }
</script>
<style lang="scss">
  .mod-menu {
    .menu-list__input,
    .icon-list__input {
      >.el-input__inner {
        cursor: pointer;
      }
    }
    &__icon-popover {
      width: 458px;
      overflow: hidden;
    }
    &__icon-inner {
      width: 478px;
      max-height: 258px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    &__icon-list {
      width: 458px;
      padding: 0;
      margin: -8px 0 0 -8px;
      >.el-button {
        padding: 8px;
        margin: 8px 0 0 8px;
        >span {
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          font-size: 18px;
        }
      }
    }
    .icon-list__tips {
      font-size: 18px;
      text-align: center;
      color: #e6a23c;
      cursor: pointer;
    }
  }
</style>
